<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;width: 100px;float: left;
            background: red;margin-left: 100px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script type="text/javascript">
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");

        //改变高度
        box2.onmouseover = function () {
            startMove1(box2,500);
        }
        box2.onmouseout = function () {
            startMove1(box2,100);
        }

        var timer = null;
        function startMove1(obj,target) {
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = (target-obj.offsetHeight)/3;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(obj.offsetHeight==target){
                    clearInterval(timer);
                }else{
                    obj.style.height = obj.offsetHeight +speed +"px";
                }
                document.title = obj.style.height;
            },30);
        }


        //改变宽度
        box1.onmouseover = function () {
            startMove2(box1,500);
        }
        box1.onmouseout = function () {
            startMove2(box1,100);
        }

        var timer = null;
        function startMove2(obj,target) {
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = (target-obj.offsetWidth)/10;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(obj.offsetWidth==target){
                    clearInterval(timer);
                }else{
                    obj.style.width = obj.offsetWidth +speed +"px";
                }
                document.title = obj.style.width;


            })
        }



    </script>

</body>
</html>